<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      class="spbg"
      >
      <el-table-column
        type="selection"
        width="55"
        class="xzk">
      </el-table-column>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <div class="spxq">
              <div class="spxq1">
                <img :src="props.row.headp" alt="">
              </div>
              <div class="spxq2">密码：{{props.row.upwd}}</div>
              <div class="spxq3">
                <el-tooltip class="item" effect="dark" :content="props.row.signature" placement="bottom-start">
                  <span>签名：{{props.row.signature}}</span>
                </el-tooltip>
              </div>
            </div>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="用户 ID"
        prop="uid">
      </el-table-column>
      <el-table-column
        label="用户名称"
        prop="uname">
      </el-table-column>
      <el-table-column
        label="手机号码"
        prop="phone">
      </el-table-column>
      <el-table-column
        label="粉丝数量"
        prop="fans">
      </el-table-column>
      <el-table-column
        label="被赞次数"
        prop="ulike">
      </el-table-column>
      <el-table-column
        label="被收藏数"
        prop="collection">
      </el-table-column>
      <el-table-column
        label="操作"
        width="150">
        <template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style lang='scss'>
  // .demo-table-expand {
  //   font-size: 0;
  // }
  // .demo-table-expand label {
  //   width: 90px;
  //   color: #99a9bf;
  // }
  // .demo-table-expand .el-form-item {
  //   margin-right: 0;
  //   margin-bottom: 0;
  //   width: 50%;
  // }
  .spbg{
    .spxq{
      display: flex;
      width: 80%;
      margin: 0 auto;
      align-items: center;
      .spxq1{
        width: 30px !important;
        height: 30px;
        margin-right: 15px;
        >img{
          display: inline-block;
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }
      }
      .spxq2{
        width: 150px !important;
        margin-right: 15px;
        margin-left: 15px;
      }
      .spxq3{
        height: 40px;
          line-height: 40px;
        span{
          display: inline-block;
          line-height: 40px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .el-tooltip__popper{
    width: 635px;
    max-width: 635px;
    line-height: 20px;
  }
  .el-tooltip__popper[x-placement^=bottom]{
    // margin-top: 5px;
  }
</style>

<script>
  export default {
    data() {
      return {
        tableData:[],
      }
    },
    methods: {
      getspsj(){
        let url = "/list";
        this.axios.get(url).then((res) => {
          console.log(res);
          this.tableData = res.data.data;
          // console.log(this.tableData)
        });
      },
      handleDelete(a,b){
        // a行号   b内容
        console.log(a,b)
        if(b.uid==1){
          alert('此账号为管理员账号，禁止删除！')
          return
        }else{
          alert('用户信息为重要数据，确定要删除吗？')
        }
      }
    },
    mounted(){
      this.getspsj()
    }
  }
</script>